<template>
  <div class="combination-add-chunk1">
    <div class="card card1">
      <p class="tip">方案配置范围</p>
      <el-tree :data="treeData" :props="{ children: 'list', label: 'name' }" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="card card2"> 
      <el-form ref="dataFrom" :inline="true" label-width="80px" :model="dataFrom" class="demo-form-inline">
        <el-form-item label="" prop="investName">
          <el-input v-model="dataFrom.investName" size="mini" clearable placeholder="所属投顾" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="" prop="strategyName">
          <el-input v-model="dataFrom.strategyName" size="mini" clearable placeholder="策略名称" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button class="bg-green" size="mini" @click="getList">搜索</el-button>
          <el-button size="mini" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
        <el-table
          size="mini"
          border
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          stripe fit
          :row-key="row=>row.strategyInfoVo.strategyId"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
          <el-table-column prop="strategyInfoVo.strategyName" label="策略名称" :show-overflow-tooltip="true" width="180">
            <template slot-scope="{row}">
              <span v-strategy="{id:row.strategyInfoVo.strategyId, userId}">{{ row.strategyInfoVo&&row.strategyInfoVo.strategyName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="strategyInfoVo.investName" label="所属投顾" min-width="100" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="netWorthDetialBean.unitNetworth" label="单位净值"  min-width="95" align="center"></el-table-column>
          <el-table-column prop="netWorthDetialBean.networthTime" label="净值时间"  min-width="100" align="center"></el-table-column>
          <el-table-column prop="netWorthDetialBean.thisyearAnnualizedincomeRate" label="今年以来收益率" width="140"  align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthDetialBean.thisyearAnnualizedincomeRate" :class="row.netWorthDetialBean.thisyearAnnualizedincomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthDetialBean.thisyearAnnualizedincomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="strategyInfoVo.makeTime" label="成立日期"  min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.strategyInfoVo&&row.strategyInfoVo.makeTime || '' | parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination class="pagination-container-mini" v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <div class="card card3">
      <p class="tip">已选产品 ({{slick_list.length}}/200)</p>
      <SlickList
        :userDragHandle="true"
        :lockToContainerEdges="true"
        lockAxis="y"
        helperClass="slickIteming-card"
        v-model="slick_list"
        @input="getChangeLists"
      >
        <SlickItem v-for="(item, index) in slick_list" :index="index" :key="item.strategyInfoVo.strategyId">
          <div class="slickItem-card">
            <span>{{ item.strategyInfoVo.strategyName }}</span>
            <span style="color: #1689e5;" class="el-icon-close" @mousedown="closeItemCard(index)"></span>
          </div>
        </SlickItem>
      </SlickList>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import { SlickList, SlickItem } from "vue-slicksort"
import { findStrategyTree } from '@/api/combination'
import { fetchList } from '@/api/policyManage'

export default {
  components: { Pagination, SlickList, SlickItem },
  props: {
    chunk1_res: {
      type: Array,
      default: () => {
        return []
      }
    },
    deleteIndex: {
      type: Number
    }
  },
  data() {
    return {
      treeData: [],

      listLoading: false,
      total: 0,
      dataFrom: {},
      list: [],
      old_list: [],
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      
      slick_list: [],
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  watch: {
    deleteIndex(id) {
      if(id) {
        const row = this.slick_list.find(item => item.strategyInfoVo.strategyId == id)
        this.list.map(item => {
          if (item.strategyInfoVo.strategyId === id) {
            this.$refs.multipleTable.toggleRowSelection(item, false)
          } else {
            this.$refs.multipleTable.toggleRowSelection(row, false)
          }
        })
      }
    }
  },
  created() {
    this.findStrategyTree()
    this.getList()
  },
  methods: {
    handleNodeClick(data) {
      if(data.type) {
        if(this.dataFrom[data.type]&&this.dataFrom[data.type][0]==data.id) {
          return false
        }
        if(this.dataFrom['marketList']) delete this.dataFrom['marketList']
        if(this.dataFrom['methodList']) delete this.dataFrom['methodList']
        if(this.dataFrom['subjectList']) delete this.dataFrom['subjectList']
        if(this.dataFrom['styleList']) delete this.dataFrom['styleList']
        if(data.type == 'styleList') {
          this.dataFrom[data.type] = data.id
        }else {
          this.dataFrom[data.type] = []
          this.dataFrom[data.type].push(data.id)
        }
        this.getList()
      }
    },
    handleSelectionChange(vals) {
      this.slick_list = vals
      const list = []
      let newMakeTime = ''
      this.slick_list.forEach(element => {
        if(!newMakeTime) {
          newMakeTime = element.strategyInfoVo.makeTime
        }else {
          newMakeTime = new Date(newMakeTime) > new Date(element.strategyInfoVo.makeTime) ? newMakeTime : element.strategyInfoVo.makeTime
        }
        list.push(element.strategyInfoVo.strategyId)
      })
      this.$emit('newMakeTime', newMakeTime)
      this.$emit('update:chunk1_res', list)
    },
    getChangeLists(vals) {
      this.slick_list = vals
      const list = []
      vals.forEach(element => {
        list.push(element.strategyInfoVo.strategyId)
      })
      this.$emit('update:chunk1_res', list)
    },
    closeItemCard(i) {
      const row = this.slick_list[i]
      const id = this.slick_list[i].strategyInfoVo.strategyId
      this.list.map(item => {
        if (item.strategyInfoVo.strategyId === id) {
          this.$refs.multipleTable.toggleRowSelection(item, false)
        } else {
          this.$refs.multipleTable.toggleRowSelection(row, false)
        }
      })
    },
    findStrategyTree() {
      findStrategyTree().then(res => {
        this.treeData = res.body
        console.log('树', this.treeData)
      })
    },
    resetForm() {
      // this.$refs.dataFrom.resetFields()
      this.dataFrom = {}
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchList({
        userId: this.userId,
        ...this.listQuery,
        ...this.dataFrom
      }).then(res => {
        this.listLoading = false
        console.log('组合 策略管理', res)
        this.list = res.body || []
        this.total = res.count || 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.combination-add-chunk1 {
  display: flex;
  .tip {
    font-size: 14px;
    padding: 8px;
    background: rgba(225, 224, 224, 0.2);
  }
  .card { height: 600px; }
  .card1 {
    width: 198px;
    border: 1px solid #e1e0e0;
    overflow-y: auto;
  }
  .card2 {
    width: calc( 100% - 436px );
    border: 1px solid #e1e0e0;
    margin: 0 10px;
    padding: 10px;
    ::v-deep .el-form {
      .el-form-item { margin-bottom: 9px; }
    }
  }
  .card3 {
    width: 238px;
    border: 1px solid #e1e0e0;
    .slickItem-card {
      font-size: 12px;
      margin: 0 8px;
      height: 24px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:hover {
        background: rgb(231, 231, 231);
      }
    }
  }

  // ::v-deep .has-gutter {
  //   .el-checkbox {pointer-events: none;}
  //   .el-checkbox__inner {background: #DCDFE6; border-color: #DCDFE6;}
  // }
}
</style>

